<template>
  <div class="AiWrite" >
    <div class="formWrite">
      <el-form :label-width="'0px'" @submit.native.prevent>
        <el-form-item>
          <el-input type="textarea" size="mini"
            v-model="form.text" maxlength="2000" :rows="6" placeholder="请输入您需要优化的文案..." @keyup.ctrl.enter.native="save">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="btn-submit">
        <el-button size="small" type="primary" @click="save" :disabled="isWait" style="width:52%;">发送（Ctrl+Enter）</el-button>
        <el-button size="small" type="primary" @click="clear" style="width:45%;">清空内容</el-button>
      </div>
    </div>
    <div class="preview">
      <div class="txtt">预览</div>
      <div class="viewContent" v-loading="isWait">
        <i class="u-copy el-icon-document-copy" title="复制" @click="copy(writinglastAssistantContent)"/>
        <el-scrollbar style="height:100%;">
        <div class="content"><pre style="white-space: pre-wrap;">{{writinglastAssistantContent}}</pre></div>
        </el-scrollbar>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    writing: {
      type: Object
    },
    usedNumGet: {
      type: Function
    }
  },
  created () {
    this.form.text = this.writing.lastUser && this.writing.lastUser.content ? this.writing.lastUser.content : ''
    this.writinglastAssistantContent = this.writing.lastAssistant && this.writing.lastAssistant.content ? this.writing.lastAssistant.content : ''
  },
  data () {
    return {
      form: {
        text: ''
      },
      // 最后一次内容
      writinglastAssistantContent: '',
      // 是否正在等待回复
      isWait: false
    }
  },
  watch: {
    writing (val) {
      this.form.text = val.lastUser && val.lastUser.content ? val.lastUser.content : ''
      this.writinglastAssistantContent = val.lastAssistant && val.lastAssistant.content ? val.lastAssistant.content : ''
    }
  },
  methods: {
    clear () {
      this.form.text = ''
    },
    save () {
      if (this.isWait || this.form.text.trim() === '') {
        return
      }
      this.isWait = true
      // AI创作对话
      this.$post('/ai/ai-text-writing', {content: this.form.text.trim()}).then(response => {
        if (response && response.writing) {
          this.writinglastAssistantContent = response.writing.lastAssistant && response.writing.lastAssistant.content ? response.writing.lastAssistant.content : ''
          this.usedNumGet()
          this.isWait = false
        } else {
          this.isWait = false
        }
      })
    },
    copy (copyText) {
      const input = document.createElement('textarea')
      document.body.appendChild(input)
      input.innerHTML = copyText
      input.setAttribute('code', 1)
      input.select()
      if (navigator.clipboard !== undefined) { // Chrome
        navigator.clipboard.writeText(copyText).then(() => {
          this.$message.success('复制成功！')
        }, function (err) {
          console.error('Async: Could not copy text: ', err)
        })
      } else if (window.clipboardData) { // Internet Explorer
        window.clipboardData.setData('Text', copyText)
        this.$message.success('复制成功！')
      } else {
        document.execCommand('Copy')
        let list = document.getElementsByTagName('textarea')
        let inputList = Array.prototype.slice.call(list)
        inputList.forEach((item) => {
          if (item.getAttribute('code')) {
            document.body.removeChild(item)
          }
        })
        this.$message.success('复制成功！')
      }
    }
  },
  components: {
  }
}
</script>
<style scoped lang="scss">
.AiWrite{
  /deep/ .el-form-item{
    margin-bottom: 12px;
  }
  /deep/ .el-textarea__inner{
    font-size: 13px;
  }
  .btn-submit{
    display: flex;
    justify-content: space-between;
  }
}
.preview{
  margin-top: 15px;
  .txtt{
    color:#333;
    margin-bottom: 10px;
  }
}
.viewContent{
  position: relative;
  background: #f6f6f6;
  border-radius: 2px;
  height: calc(100vh - 350px);
  /deep/ {
    .el-scrollbar__wrap {
      overflow-x: hidden;
    }
    .is-horizontal{
      display: none;
    }
  }
  .u-copy{
    position: absolute;
    top: 0;
    right: 0;
    padding: 5px;
    cursor: pointer;
    background: #e9e9e9;
    color: #666;
    z-index: 99;
    &:hover{
      background: #52A7FC;
      color: #fff;
    }
  }
  .content{
    padding: 15px 20px;
    color: #333;
  }
}
</style>
